<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="运营区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sysOrgCode">
              <a-tree-select
                v-model="model.sysOrgCode"
                :tree-data="deptTreeDict"
                :replaceFields="replaceFields"
                :show-checked-strategy="SHOW_PARENT"
                search-placeholder="请选择运营区域"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="代金券名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入代金券名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="卡券类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryCode">
              <a-select v-model="model.categoryCode" placeholder="请输入卡券类别">
                <a-select-option v-for="(item, index)  in couponCategoryOptions" :key="item.key" :value="item.value"> {{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
              <a-input-number v-model="model.price" placeholder="请输入价格"  style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="面值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faceValue">
              <a-input-number v-model="model.faceValue" placeholder="请输入面值" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="最低消费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="minAmount">
              <a-input-number v-model="model.minAmount" placeholder="请输入最低消费" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="有效天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="validDays">
              <a-input-number v-model="model.validDays" placeholder="请输入有效天数" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startTime">
              <j-date placeholder="请选择开始时间" :dateFormat="'YYYY-MM-DD HH:mm:ss'" v-model="model.startTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime">
              <j-date placeholder="请选择结束时间" :dateFormat="'YYYY-MM-DD HH:mm:ss'" v-model="model.endTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="配置状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <a-select  name="status" v-model="model.status" placeholder="请选择配置状态">
                <a-select-option v-for="(item, index)  in statusDicts" :key="index.toString()" :value="item.value"> {{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="代金卷配色" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="color">
              <colorPicker :defaultColor="'#f9974c'" v-model="model.color" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="总发放数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalNum">
              <a-input-number v-model="model.totalNum" placeholder="请输入总发放数量(0-无限量)" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col v-if="formDisabled" :span="24">
            <a-form-model-item label="已发放数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sendNum">
              <a-input-number v-model="model.sendNum" placeholder="请输入已发放数量" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { status } from 'nprogress';
  import { TreeSelect } from 'ant-design-vue';
  const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  const replaceFields =	{children:'children', title:'title', key:'key', value: 'orgCode' };
  export default {
    name: 'RentalCouponConfigForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/rental/coupon-config/add",
          edit: "/rental/coupon-config/edit",
          queryById: "/rental/coupon-config/queryById",
          queryTreeUrl: "/sys/sysDepart/queryTreeList",
          categoryUrl: "/rental/coupon-category/options",
        },
        statusDicts: [{
          label: '冻结',
          value: "0"
        }, {
          label: '生效',
          value: "1"
        }],
        deptTreeDict:[],
        SHOW_PARENT,
        replaceFields,
        couponCategoryOptions: [],
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
       this.getCategoryOptions();
       this.getDeptTreeDict();
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      getCategoryOptions(){
        getAction(this.url.categoryUrl,{}).then((res) => {
          if(res.success){
            this.couponCategoryOptions = res.result;
          }
        })
      },
      getDeptTreeDict(){
        getAction(this.url.queryTreeUrl,{}).then((res)=>{
          this.deptTreeDict=res.result;
          console.log("deptTreeDict:", this.deptTreeDict);
        }).finally(() => {

        })
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>